<template>
  <div class="" style="height: 93%">
    <el-space class="mb15">
      <el-button
        :type="activeIndex === index ? 'primary' : 'info'"
        :plain="activeIndex !== index"
        v-for="(item, index) in tableTabs"
        :key="item.name"
        @click="handleClickTabs(index)"
      >
        {{ item.title }}
      </el-button>
    </el-space>
    <div class="top-tips">
      <div v-if="activeIndex === 0">菜品角标展示在手机点餐端和平板点餐端的菜品图片上，用于标记新品、热销等，以吸引顾客购买</div>
      <div v-if="activeIndex === 1">
        菜品描述标签展示在手机点餐端的菜品名称下方，用于含乳制品、可做热饮等菜品信息或其他卖点说明，可通过排序调整标签在手机点餐端的展示顺序
      </div>
      <div v-if="activeIndex === 2">统计标签将用于菜品报表统计</div>
    </div>
    <div class="table-box" style="height: 95%">
      <ProTable
        ref="proTable"
        :columns="columns"
        :request-api="getTableList"
        :tool-button="false"
        :init-param="initParam"
        :data-callback="dataCallback"
      >
        <!-- 表格 header 按钮 -->
        <template #tableHeader>
          <el-button type="primary" :icon="CirclePlus" @click="openDrawer('新增')">
            新增{{ tableTabs[activeIndex].title }}
          </el-button>
        </template>
        <!-- 表格操作 -->
        <template #operation="scope">
          <el-button type="primary" link :icon="View" @click="openDrawer('查看', scope.row)"> 查看 </el-button>
          <el-button type="primary" link :icon="EditPen" @click="openDrawer('编辑', scope.row)"> 编辑 </el-button>
          <el-button type="primary" link :icon="Delete" @click="deleteAccount(scope.row)"> 删除 </el-button>
        </template>
      </ProTable>
    </div>
    <UserDrawer ref="drawerRef" />
  </div>
</template>

<script setup lang="ts" name="LabelManage">
import { ref, reactive } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { User } from "@/api/interface";
import { useHandleData } from "@/hooks/useHandleData";
import UserDrawer from "@/views/proTable/components/UserDrawer.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { CirclePlus, Delete, EditPen, View } from "@element-plus/icons-vue";
import { getUserList, deleteUser, editUser, addUser } from "@/api/modules/user";

const activeIndex = ref(0);
const tableTabs = ref([
  { title: "菜品角标", name: "1" },
  { title: "描述标签", name: "2" },
  { title: "统计标签", name: "3" }
]);

const handleClickTabs = (index: number) => {
  if (activeIndex.value !== index) {
    activeIndex.value = index;
  }
};

const getTableList = () => {
  if (activeIndex.value === 0) {
    return getUserList;
  } else if (activeIndex.value === 1) {
    return getUserList;
  } else if (activeIndex.value === 2) {
    return getUserList;
  }
};

// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref<ProTableInstance>();

// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({ type: 1 });

// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total && pageNum && pageSize 这些字段，那么你可以在这里进行处理成这些字段
// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
const dataCallback = (data: any) => {
  return {
    list: data.list,
    total: data.total,
    pageNum: data.pageNum,
    pageSize: data.pageSize
  };
};

// 表格配置项
const columns: ColumnProps<User.ResUserList>[] = [
  { type: "index", label: "序号", width: 80 },
  { prop: "name", label: "标签名称", search: { el: "input" } },
  { prop: "idCard", label: "关联菜品数量" },
  { prop: "operation", label: "操作", fixed: "right", width: 330 }
];

// 删除用户信息
const deleteAccount = async (params: User.ResUserList) => {
  await useHandleData(deleteUser, { id: [params.id] }, `删除【${params.username}】用户`);
  proTable.value?.getTableList();
};

// 打开 drawer(新增、查看、编辑)
const drawerRef = ref<InstanceType<typeof UserDrawer> | null>(null);
const openDrawer = (title: string, row: Partial<User.ResUserList> = {}) => {
  const params = {
    title,
    isView: title === "查看",
    row: { ...row },
    api: title === "新增" ? addUser : title === "编辑" ? editUser : undefined,
    getTableList: proTable.value?.getTableList
  };
  drawerRef.value?.acceptParams(params);
};
</script>

<style lang="scss" scoped>
.top-tips {
  margin-bottom: 15px;
  font-size: 14px;
  color: #666666;
}
</style>
